<template>
    <el-dialog v-model="visible" title="服务类型选择" :close-on-click-modal="false" :width="400">
        <div class="type-div">
            <div class="type-item-box" @click="typeChange(1)">
                数据库
            </div>
            <div class="type-item-box" @click="typeChange(2)">
                API接口
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false)

const emit = defineEmits(['typeChange'])

const init = () => {
    visible.value = true
}

const typeChange = (value) => {
    visible.value = false
    emit('typeChange', value)
}

defineExpose({
    init
})

</script>

<style lang="scss" scoped>
.type-div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}

.type-item-box {
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
    cursor: pointer;
    border-radius: 4px;
}

.type-item-box:hover {
    background-color: #b2bcfc;
    color: #fff;
}
</style>